<template>
  <div class="layout-demo">
    <h3 class="title">基本</h3>
    <div>
      <d-layout>
        <d-header>Header</d-header>
        <d-content>Content</d-content>
        <d-footer>Footer</d-footer>
      </d-layout>
      <br/>
      <d-layout>
        <d-header>Header</d-header>
        <d-layout>
          <d-sider>Sider</d-sider>
          <d-content>Content</d-content>
        </d-layout>
        <d-footer>Footer</d-footer>
      </d-layout>
      <br/>
      <d-layout>
        <d-sider>Sider</d-sider>
        <d-layout>
          <d-header>Header</d-header>
          <d-content>Content</d-content>
          <d-footer>Footer</d-footer>
        </d-layout>
      </d-layout>
    </div>
  </div>
</template>

<script>
export default {
  name: 'layoutDemo',
  data () {
    return {
    }
  }
}
</script>

<style lang="stylus" scoped>
$primary1-color = lighten($primary-color, 30%)
$primary2-color = lighten($primary-color, 15%)
.layout-demo
  .d-layout-header, .d-layout-footer
    background-color $primary2-color
    color #fff
    line-height 64px
    height 64px
    text-align center
  .d-layout-content
    background-color $primary-color
    color #fff
    min-height 120px
    line-height 120px
    text-align center
  .d-layout-sider
    background-color $primary1-color
    color #fff
    text-align center
    line-height 120px
</style>
